<template>
  <div>
        <!-- 面包屑导航 -->
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
          </el-breadcrumb>

          <!-- 卡片视图区域 -->
          <el-card class="box-card">
            <el-row>
              <el-col>
                <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
              </el-col>
            </el-row>

            <!-- 表格   show-index索引 index-text数据索引名称 -->
            <tree-table :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border>
              <!-- 是否有效列 isok -->
              <template slot="isok" slot-scope="scope">
                <i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color:purple"></i>
                <i class="el-icon-error"   v-else  style="color:red"></i>
              </template>
              <!-- 排序列 order -->
              <template slot="order" slot-scope="scope">
                <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
                <el-tag size="mini" v-else-if="scope.row.cat_level===1" type="success">二级</el-tag>
                <el-tag size="mini" v-else type="warning">三级</el-tag>
              </template>
              <!-- 操作列 opt -->
              <template slot="opt" slot-scope="scope">
                <el-button size="mini" type="primary" icon="el-icon-edit" @click="bianjifenlei(scope.row.cat_id)">编辑</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete"  @click="deleteFenlei(scope.row.cat_id)">删除</el-button> 
              </template>
            </tree-table>

            <!-- 页码 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="querInfo.pagenum"
              :page-sizes="[3, 5, 7, 10]"
              :page-size="querInfo.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>

            <!-- 添加分类模块 -->
              <el-dialog
                title="提示"
                :visible.sync="addCateDialogVisible"
                width="50%"
                @close="addCateclose"
               >
                <el-form :model="addFromCate" :rules="addFromCateRules" ref="addFromCateRef" label-width="100px">
                  <!-- 添加分类的表单------------------------------------------------- -->
                        <el-form-item label="分类名称" prop="cat_name">
                          <el-input v-model="addFromCate.cat_name"></el-input>
                        </el-form-item>
                  <!-- 添加分类的表单 级联选择器------------------------------------------------- -->
                  <!--options：指定数据源   props用来指定配置对象  v-model存储选择的数据  clearable允许清空选项 change-on-select允许选中任意一级选项-->
                        <el-form-item label="父级分类" >
                          <el-cascader  change-on-select v-model="selectdKeys" :options="parentCateList" :props="cascaderProps" @change="parentCateChange"></el-cascader>
                        </el-form-item>
                  </el-form>  
                <span slot="footer" class="dialog-footer">
                  <el-button @click="addCateDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="addCate">确 定</el-button>
                </span>
              </el-dialog>
          </el-card>

          <!-- 编辑分类区域 -->
        <el-dialog
          title="编辑分类"
          :visible.sync="hideAndShowfenlei"
          width="30%"
          >
         <!-- ---------------------------------      --->
         <el-form ref="form" :model="baocun" label-width="80px">
            <el-form-item label="编辑分类">
              <el-input v-model="baocun.cat_name"></el-input>
            </el-form-item>
         </el-form>
         <!-- --------------------------------------- -->
          <span slot="footer">
            <el-button @click="hideAndShowfenlei = false">取 消</el-button>
            <el-button type="primary" @click="tijiaofenlei(baocun.cat_name)">确 定</el-button>
          </span>
        </el-dialog>

  </div>
</template>

<script>
export default {
    name:'myCate',
    data(){
        return {
          querInfo:{
            type:3,
            // 当前的页码
            pagenum:1,
            // 默认每页显示5条数据
            pagesize:5
          },
            // 商品分类的数据列表
            catelist:[],
            // 商品总数居条数
            total:0,
            // 为table指定列的定义
            columns:[{
              label:'分类名称',
              prop:'cat_name'
            },
            {
              label:'是否有效',
              // 表示将当前列定义为模板列
              type:'template',
              // 表示当前这一列使用模板名称
              template:'isok'
            },
            {
              label:'排序',
              // 表示将当前列定义为模板列
              type:'template',
              // 表示当前这一列使用模板名称
              template:'order'
            },
            {
              label:'操作',
              // 表示将当前列定义为模板列
              type:'template',
              // 表示当前这一列使用模板名称
              template:'opt'
            }
            ],
            // 控制分类模块是否显示的
            addCateDialogVisible:false,
            // 添加分类表单的数据对象
            addFromCate:{
              //将要添加的数据的名称
              cat_name:'',
              // 父级分类的id
              cat_pid:0,
              // 分类层级 0默认一级分类
              cat_level:0
            },
            // 添加分类表单的验证规则对象
            addFromCateRules:{
              cat_name:[
                {required:true,message:'请输入分类的名称',trigger:'blur'}
              ]
            },
            // 父级分类的列表
            parentCateList:[],
            cascaderProps:{
              label:'cat_name',
              value:'cat_id',
              children:'children'
            },
            // 选中的父级分类的id数组
            selectdKeys:[],
            // ------------------------------------
            // 编辑分类对话框的显示和隐藏
            hideAndShowfenlei:false,
            // 保存编辑分类
            baocun:{
              cat_name:''
            },
            // 保存编辑的id
            bainjiID:''
        }
    },
    created(){
      this.getCateList()
    },
    methods:{
          async getCateList(){
            const {data:res} = await this.$axios.get('/categories',{params:this.querInfo})
            // if(res.meta.suatus !== 200) return this.$message.error('获取商品分类失败')
            // 保存商品数据
            this.catelist=res.data.result
            // 为总数据条数赋值
            this.total=res.data.total
            console.log(res.data);
          },
          // 监听分页功能
          handleSizeChange(newSize){
            this.querInfo.pagesize=newSize
            this.getCateList()
          },
          // 当前是第几页 页码发生改变
          handleCurrentChange(newPage){
            this.querInfo.pagenum = newPage
            this.getCateList()

          },
          // 点击按钮展示添加分类的对话框
          showAddCateDialog(){
          // 获取父级分类的列表
            this.getParentCateList()
            // 展示对话框
            this.addCateDialogVisible=true
          },
          // 获取父级分类的列表
          async getParentCateList(){
            const {data:res}=await this.$axios.get('categories',{params:{type:2}})
            if(res.meta.status !== 200) return this.$message.error('获取父级分类失败！')
            this.parentCateList=res.data
          },
          //级联选择器 项发生变化就触发 
          parentCateChange(){
            // 判断如果selectdKeys的长度大于0就说明选中了父级分类
            // 反之就没有选中任何分类
            if(this.selectdKeys.length > 0) {
              // 父级分类的id
                this.addFromCate.cat_pid=this.selectdKeys[this.selectdKeys.length-1]
                // 为当前分类等级赋值
                this.addFromCate.cat_level=this.selectdKeys.length
                return
              }else{
               this.addFromCate.cat_pid=0
              this.addFromCate.cat_level=0
              }
          },
          // 点击按钮添加新的分类
          async addCate(){
            this.$refs.addFromCateRef.validate(valid=>{
              if(!valid)return 
            })
              const {data:res} = await this.$axios.post('categories',this.addFromCate)
              if(res.meta.status !== 201) return this.$message.error('添加分类失败')
              this.$message.success('添加分类成功！')
            this.getCateList()
            this.addCateDialogVisible=false
          },
          // 监听对话框的关闭事件 重置表单数据
          addCateclose(){
            this.$refs.addFromCateRef.resetFields()
            this.selectdKeys=[]
            this.addFromCate.cat_level=0
            this.addFromCate.cat_pid=0
          },
          // 编辑分类
         async bianjifenlei(id){
            // 通过id查询分类回显到页面上
           const {data:res} = await this.$axios.get(`categories/${id}`)
           this.baocun = res.data
           console.log(res);
          this.hideAndShowfenlei=true
          },  
          // 提交编辑完成的分类-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
          // 显示编辑分类为空
          async tijiaofenlei(name){
            console.log(name);
            const {data:res} = await this.$axios.put(`categories/${this.baocun.cat_id}`,{cat_name:name})
            // 关闭对话框
            this.hideAndShowfenlei=false
            // 刷新页面
            this.getCateList()
            console.log(res);
          },
          // 删除分类部分
          async deleteFenlei(id){
            // 弹出对话框是否要删除
           // 根据弹框提示用户是否要删除
            const res = await this.$confirm( "此操作将永久删除该分类，是否继续?","提示",{
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning", 
              }
            ).catch(err=>err);
            // 如果用户点击的确定就返回字符串confirm
            // 如果用户点击的取消就返回字符串cancel
            if(res !== 'confirm'){
               return this.$message.info('已经取消删除')
            }else{
            const {data:delres} = await this.$axios.delete(`categories/${id}`)
            if(delres.meta.status !== 200) return this.$message.error('删除权限失败')
            // 从新渲染页面
             this.getCateList()
            }  
          }

    }
}
</script>

<style scoped>
.el-button {
  margin-bottom: 15px;
}
.el-cascader {
  width: 100%;
}
</style>